<template>
  <div>
    <el-radio-group v-model="labelPosition" size="medium">
      <el-radio-button label="left">左对齐</el-radio-button>
      <el-radio-button label="right">右对齐</el-radio-button>
      <el-radio-button label="top">顶部对齐</el-radio-button>
    </el-radio-group>
    <div style="margin: 20px;"></div>
    <el-form ref="form" :model="form" label-width="80px" size="medium" :label-position="labelPosition" :rules="rules">
      <el-form-item label="班级名称" prop="name">
        <el-input v-model="form.name" multiple placeholder="请输入作业名称" size="medium" maxlength="10" show-word-limit style="width: 580px"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmit('form')">添加</el-button>
        <el-button @click="resetForm('form')">重置</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import axios from "axios";

export default {
name: "class",
  data() {
    return {
      labelPosition: 'right',
      form: {
        name: ''
      },
      rules: {
        name: [
          { required: true, message: '请输入作业名称', trigger: 'blur' },
          { min: 1, max: 10, message: '长度在 1 到 10 个字符', trigger: 'blur' }
        ]
      }
    }
  },
  methods: {
    onSubmit (form) {
      this.$refs[form].validate((valid) => {
        if (valid) {
          axios.get('http://127.0.0.1:8091/class/addClass/' + this.form.name).then((res) => {
            if (res && res.info === 0) {
              this.$router.push({name: 'result'})
            }
          }).catch().finally(
            this.resetForm(form)
          )
        } else {
          this.$message.error('参数错误')
          return false
        }
      })
    },
    resetForm (form) {
      this.$refs[form].resetFields()
    }
  }
}
</script>

<style scoped>

</style>
